<template>
	<view class="category">
		<view class="category-search">
			 <u-search placeholder="请输入商品关键词" bgColor="#ffffff" disabled :showAction="false" @click="toSearch" />
		</view>
		<view class="category-content">
			<scroll-view class="category-content-left" :scroll-y="true" :style="{ height: `${categoryListHeight}px` }">
				<view
				  v-for="(item, index) in categoryOneList"
					:key="index"
					class="category-content-left-item"
					:class="[item.id === categoryOneId ? 'category-content-left-active' : '']"
					@click="selectCategoryOne(item.id)"
				>
					<text class="fs14">{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view class="category-content-right" :scroll-y="true" :style="{ height: `${categoryListHeight}px` }">
				<u-skeleton
	        rows="4"
	       	:loading="loading"
	       	:title="false"
					 rowsHeight="30"
	       >
				 <u-grid
          :border="false"
        >
            <u-grid-item
              v-for="(baseListItem,baseListIndex) in categoryTwoList"
              :key="baseListIndex"
							@click="toCategory(baseListIndex)"
            >
						  <u-gap height="20" />
						  <u--image :showLoading="true" :src="baseListItem.icon[0].url" width="100rpx" height="100rpx" />
							<u-gap height="5" />
              <text class="fs14">{{baseListItem.name}}</text>
            </u-grid-item>
        </u-grid>
				</u-skeleton>
			</scroll-view>
		</view>
		<Ctabbar />
	</view>
</template>

<script>
	export default {
		name: 'Category', // 商品分类页面
		options: { styleIsolation: 'shared' }, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		data() {
			return {
				loading: true,
				windowHeight: 0, // 窗口高度
				statusBarHeight: 0, // 状态栏 + 导航栏
				categorySearchHeight: 0, // 头部搜索框高度
				categoryOneId: '', // 当前选择的一级分类ID
				categoryOneList: [], // 一级分类数据
				categoryTwoList: [], // 二级分类数据
			}
		},
		onUnload() {
			console.log('分类页面卸载')
		},
		onShow() {
			this.$nextTick(() => {
				this.getWindowsHeight()
			})
			this.getList()
		},
		computed: {
			// 分类列表高度
			categoryListHeight() {
				return this.windowHeight - (this.statusBarHeight + this.categorySearchHeight + 50)
			}
		},
		methods: {
			// 获取相关高度
			getWindowsHeight() {
				const app = uni.getSystemInfoSync()
			  this.windowHeight = app.screenHeight // 窗口高度
			  this.statusBarHeight = app.statusBarHeight + 44 // 状态栏 + 导航栏
			  const query = uni.createSelectorQuery().in(this)
        query.select('.category-search').boundingClientRect(data => {
			  	this.categorySearchHeight = data.height // 头部搜索框高度
        }).exec()
			},
			// 点击选择一级分类
			selectCategoryOne(id) {
				this.categoryOneId = id
				this.getCategoryTwo()
			},
			// 初始化一级分类数据
			async getList() {
				const { code, data } = await this.$category.goodsCategoryOne()
				if (code === 0) {
					this.categoryOneList = data
					if (uni.$u.test.array(this.categoryOneList) && this.categoryOneList.length > 0) {
						this.categoryOneId = this.categoryOneList[0].id
						this.getCategoryTwo()
					}
				}
			},
			// 获取二级分类数据
			async getCategoryTwo() {
				this.loading = true
				const { code, data } = await this.$category.goodsCategoryTwo({ id: this.categoryOneId })
				if (code === 0) {
					this.categoryTwoList = data
					this.loading = false
				}
			},
			// 跳转搜索页
			toSearch() {
				uni.navigateTo({
        	url: '/pages/searchGoods/searchGoods',
        	animationType: 'pop-in',
        	animationDuration: 200
        });
			},
			// 商品分类点击宫格回调
		toCategory(index) {
			uni.navigateTo({
        url: `/pages/goodsList/goodsList?categoryTwoId=${this.categoryTwoList[index].id}`,
        animationType: "pop-in",
        animationDuration: 200,
      });
		}
		}
	}
</script>

<style lang="scss" scoped>
// 骨架屏占位100%
/deep/ .u-skeleton__wrapper__content{
	padding: 40rpx 20rpx;
	&__rows{
	  width: 100% !important;
		margin: 20rpx 0;
	}
}

.category{
	&-search{
		padding: 20rpx 50rpx;
		// margin-bottom: 10rpx;
	}
	&-content{
		display: flex;
		&-left{
			flex: 0 0 180rpx;
			background: #f1dce7 !important;
			&-item{
				background: #f1dce7;
				padding: 15rpx 30rpx;
				text-align: center;
				letter-spacing: 3px;
			}
			&-active{ // 选中的样式
			  background: $uni-color-primary;
				color: #ffffff;
			}
		}
		&-right{
			flex: 1 1 0%;
			background: #ffffff;
		}
	}
}
</style>
